<script setup>
  import {ref, onMounted, onBeforeUnmount, watchEffect} from "vue";
  import { RouterView } from 'vue-router'
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
  import dayjs from 'dayjs';
  import 'dayjs/locale/zh-cn';
  dayjs.locale('zh-cn');
  import {windowWidth, windowHeight} from "./tools/index"

  const locale = ref(zhCN);
  const colorPrimary = ref('#50a0ff');

  window.changeTheme = (color) => {
    console.log(color);
    switch (color) {
      case 'Blue':
        colorPrimary.value = '#50a0ff';
        break;
      case 'Green':
        colorPrimary.value = '#6ebe28';
        break;
      case 'Orange':
        colorPrimary.value = '#dc9b28';
        break;
      case 'Red':
        colorPrimary.value = '#e65050';
        break;
      case 'Gray':
        colorPrimary.value = '#8c8c8c';
        break;
      case 'Purple':
        colorPrimary.value = '#663ab7';
        break;
      case 'LayuiGreen':
        colorPrimary.value = '#009688';
        break;
      case 'LayuiRed':
        colorPrimary.value = '#ff5722';
        break;
      case 'LayuiOrange':
        colorPrimary.value = '#ffb800';
        break;
      case 'DarkBlue':
        colorPrimary.value = '#0c1a37';
        break;
      case 'Black':
        colorPrimary.value = '#181818';
        break;
      default:
        break;
    }
  }

  // 处理窗口大小变化的函数
const handleResize = () => {
  windowWidth.value = window.innerWidth;
  windowHeight.value = window.innerHeight;
};

// 生命周期钩子
onMounted(() => {
  // 注册窗口大小变化事件监听器
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  // 移除窗口大小变化事件监听器，防止内存泄漏
  window.removeEventListener('resize', handleResize);
});

// 初始执行一次以设置正确的值
watchEffect((onInvalidate) => {
  handleResize();
});
</script>

<template>
   <a-config-provider :locale="locale" :theme="{
      token: {
        colorPrimary: colorPrimary,
        colorInfo: colorPrimary,
      },
    }">
   <router-view v-slot="{ Component }">
      <KeepAlive>
        <component :is="Component" />
      </KeepAlive>
    </router-view>
  </a-config-provider>
</template>

